import MicroApps from '@/micro/apps';
import { useGlobalStore } from '@/store';
import { useSocket } from '@ac/hooks';
import { registerMicroApps, start } from 'qiankun';
import { useEffect, type PropsWithChildren, type ReactElement } from 'react';

/**
 * 微应用加载器
 * @description 注册并启动微应用
 * @param {PropsWithChildren} props 组件属性
 * @returns {ReactElement}
 */
const MicroAppLoader = ({ children }: PropsWithChildren): ReactElement => {
	const socket = useSocket();
	useEffect(() => {
		const apps = MicroApps.map(app => {
			return {
				...app,
				props: {
					socket,
					useGlobalStore
				}
			};
		});
		registerMicroApps(apps);
		start({ sandbox: { experimentalStyleIsolation: true } });
	}, [socket]);

	return <>{children}</>;
};
export default MicroAppLoader;
